<template>
	<el-card>
		<view class="cardTitle">发送询价</view>
		<el-form class="cardForm" label-position="top" label-width="auto" :model="formLabelAlign">
			<el-form-item label="Name" class="formItem">
				<el-input v-model="formLabelAlign.name" placeholder="Name" />
			</el-form-item>
			<el-form-item label="Mobile" class="formItem">
				<el-input v-model="formLabelAlign.mobile" placeholder="Mobile" />
			</el-form-item>
			<el-form-item label="Email" class="formItem">
				<el-input v-model="formLabelAlign.email" placeholder="Email" />
			</el-form-item>
			<el-form-item label="Category" class="formItem">
				<el-input v-model="formLabelAlign.category" placeholder="Category" />
			</el-form-item>
			<el-form-item label="Leave Word" class="formItem action">
				<el-input type="textarea" v-model="formLabelAlign.leaveWord" placeholder="Leave Word" rows="4" />
			</el-form-item>
			<el-button class="formBut" color="rgb(26 54 93 / 1)">send</el-button>
		</el-form>
	</el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
// 询价信息
const formLabelAlign = ref({
	name: '',
	mobile: '',
	email: '',
	category: '',
	leaveWord: ''
});
</script>

<style scoped lang="scss">
.cardTitle {
	width: 100%;
	height: auto;
	font-size: 22px;
	font-weight: 500;
	color: rgb(26, 54, 93);
	line-height: 1.5;
	margin-bottom: 15px;
}

.cardForm {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.formItem {
		flex: 1;
		min-width: calc(50% - 10px);
		max-width: calc(50% - 10px);

		&.action {
			min-width: 100%;
		}
	}

	.formBut {
		flex: 1;
		min-width: 100%;
		height: 48px;
		font-size: 16px;
		border-radius: 10px;
	}
}

@media screen and (max-width: 768px) {
	.formItem {
		min-width: 100% !important;
		max-width: 100% !important;
	}
}
</style>
